<template>
  <div class="container">
    <div class="header">
      <div class="header-left">
        <a href="javascript:;" @click="goBack" class="iconfont back-icon"
          >&#xe624;</a
        >
      </div>
      <div class="title">在线举报</div>
    </div>

    <div class="content">
      <div class="report-content form-card">
        <div class="form-card-title">举报内容</div>
        <div class="form-card-content">
          <div class="input-group">
            <label for="">举报时间</label>
            <span>{{ reports.created_at }}</span>
          </div>
          <div class="input-group">
            <label for="">标题</label>
            <span>{{ reports.title }}</span>
          </div>
          <!-- <div class="input-group">
            <label for="">问题类别</label>
            <span>{{reports.title}}</span>
          </div> -->
          <div class="input-group">
            <label for="">被举报单位</label>
            <span>{{ reports.title }}</span>
          </div>

          <div class="input-group input-big-box">
            <label for="">主要问题</label>
            <span>
              {{ reports.content }}
            </span>
          </div>
          <div class="input-group input-big-box">
            <label for="">附件</label>
            <div class="file">
              <span v-for="(img, index) in img_tem" :key="index">
                <!-- <img :src="img.url" preview="1" :preview-text="img.title"
                  src="http://192.168.0.165/uploads-cache/1564138751.png"
                  alt=""
                /> -->
                <img
                  :src="img.url"
                  preview="1"
                  :preview-text="img.title"
                  alt=""
                />
              </span>
              <span v-if="img_tem.length <= 0" class="inputfile"> </span>
            </div>
          </div>
        </div>
      </div>

      <div class="report-content form-card">
        <div class="form-card-title">处理结果</div>
        <div class="form-card-content">
          <div class="input-group">
            <label for="">处理时间</label>
            <span>{{reports.has_many_deal[0]?reports.has_many_deal[0].deal_time:'--'}}</span>
          </div>
          <div class="input-group">
            <label for="">处理状态</label>
            <span v-if="reports.status == 0">
              待受理
            </span>
            <span v-if="reports.status == 2">
              待审核
            </span>
            <span v-if="reports.status == 3">
              待分配
            </span>
            <span v-if="reports.status == 4">
              待处理
            </span>
            <span v-if="reports.status == 5">
              非部门职责
            </span>
            <span v-if="reports.status == 1">
              已办结
            </span>

          </div>

          <div class="input-group input-big-box" v-if="reports.status == 1 || reports.status == 5  ">
            <label for="">处理意见</label>
            <span>
              {{reports.has_many_deal[0]?reports.has_many_deal[0].content:'--'}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

            
<script>
export default {
  name: "OnLineReport",
  data() {
    return {
      reports:
        this.$route.params.reports ||
        JSON.parse(localStorage.getItem("reports")) ||
        0,
      img_tem: [
        // {
        //   url: require("@/assets/images/close.png"),
        //   title: ""
        // }
      ]
    };
  },
  created() {
    if (this.reports == 0) {
      this.goBack();
    } else {
      localStorage.setItem("reports", JSON.stringify(this.reports));
    }
    this.imgRefresh();
  },
  beforeDestroy() {},
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    //图片更新
    imgRefresh() {
      if (this.reports.url) {
        this.reports.attachment.forEach(element => {
          this.img_tem.push({ url: this.reports.url + "/" + element });
        });
      }

      this.$previewRefresh(); //刷新图片预览缓存
    }
  }
};
</script>

<style lang="stylus" scoped>
.container {
  height: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  height: 0.44rem;
  line-height: 0.44rem;
  background: #256ccb;
  color: #fff;

  .header-left {
    width: 0.4rem;

    .back-icon {
      display: block;
      text-align: center;
      font-size: 0.17rem;
      font-weight: bold;
      color: #fff;
    }
  }

  .title {
    width: 100%;
    text-align: center;
    margin-right: 0.33rem;
    font-size: 0.17rem;
    font-weight: bold;
  }
}

.content {
  margin-top: 0.44rem;
  padding-bottom: 1px; // 解决内部margin无效问题
  display: block;
  min-height: calc(80% - 0.4rem);
  background-color: #f2f2f2;

  .form-card {
    width: 100%;
    background-color: #ffffff;
    margin-bottom: 0.1rem;

    .form-card-title {
      width: 96%;
      margin-left: 4%;
      height: 0.45rem;
      line-height: 0.45rem;
      color: #e34e4e;
    }

    .form-card-content {
      width: 96%;
      margin-left: 4%;

      .input-group {
        border-top: 0.01rem solid #e3e8ef;
        height: 0.44rem;
        line-height: 0.44rem;

        label {
          display: inline-block;
          width: 23%;
        }

        span {
          display: inline-block;
          width: 73%;
          height: 0.42rem;
          line-height: 0.42rem;
          text-align: right;
        }
      }

      .input-big-box {
        height: auto;

        label {
          display: block;
          width: 100%;
        }

        span {
          line-height: 0.2rem;
          text-align: left;
          width: 100%;
          word-wrap: break-word;
        }

        .file {
          span {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            display: inline-block;
            position: relative;

            img {
              width: 40px;
              height: 40px;
              position: absolute;
              top: 4px;
              left: 0;
            }
          }

          .inputfile {
            width: 40px;
            height: 40px;
            display: inline-block;
            background: url('~@/assets/images/attachment.png') center center no-repeat;
            background-size: contain;
            position: relative;
            top: 4px;
          }
        }
      }
    }
  }
}
</style>
